<template>
  <view class="logistics-container">
    <!-- 头部信息 -->
    <view class="logistics-header">
      <view class="logistics-info">
        <view class="logistics-company">
          <text class="company-name">{{ orderDetail.logisticsName || '快递公司' }}</text>
          <text class="tracking-number" @click="copyTrackingNumber">{{ orderDetail.logisticsNo || '快递单号' }}</text>
        </view>
        <view class="order-info">
          <text class="order-number">订单号：{{ orderDetail.no }}</text>
        </view>
      </view>
    </view>

    <!-- 物流轨迹 -->
    <view class="logistics-tracks">
      <view class="tracks-title">
        <text>物流轨迹</text>
      </view>
      
      <!-- 加载状态 -->
      <view v-if="loading" class="loading-container">
        <tui-loading size="20" color="#999"></tui-loading>
        <text class="loading-text">正在查询物流信息...</text>
      </view>
      
      <!-- 物流轨迹列表 -->
      <view v-else-if="trackList.length > 0" class="tracks-list">
        <view 
          v-for="(track, index) in trackList" 
          :key="index"
          class="track-item"
          :class="{ 'first': index === 0, 'last': index === trackList.length - 1 }"
        >
          <view class="track-dot">
            <view class="dot-inner"></view>
          </view>
          <view class="track-content">
            <view class="track-desc">{{ track.content }}</view>
            <view class="track-time">{{ formatTrackTime(track.time) }}</view>
          </view>
        </view>
      </view>
      
      <!-- 空状态 -->
      <view v-else class="empty-container">
        <image src="/static/img/empty-logistics.png" class="empty-icon" mode="aspectFit"></image>
        <text class="empty-text">暂无物流信息</text>
        <text class="empty-desc">快递单号可能还未录入系统，请稍后再查</text>
      </view>
    </view>

    <!-- 底部操作 -->
    <view class="logistics-footer">
      <tui-button 
        type="gray" 
        width="200rpx" 
        height="60rpx" 
        size="24" 
        shape="circle"
        @click="refreshTracks"
      >
        刷新
      </tui-button>
      <tui-button 
        type="danger" 
        width="200rpx" 
        height="60rpx" 
        size="24" 
        shape="circle"
        @click="copyTrackingNumber"
      >
        复制单号
      </tui-button>
    </view>
  </view>
</template>

<script>
import tuiButton from '@/components/thorui/tui-button/tui-button.vue'
import tuiLoading from '@/components/thorui/tui-loading/tui-loading.vue'

export default {
  components: {
    tuiButton,
    tuiLoading
  },
  data() {
    return {
      orderDetail: {},
      trackList: [],
      loading: false,
      orderId: null
    }
  },
  onLoad(options) {
    if (options.orderId) {
      this.orderId = options.orderId;
      this.loadOrderDetail();
    }
  },
  methods: {
    // 加载订单详情
    loadOrderDetail() {
      this.$api
        .req(`/trade/order/get-detail`, { id: this.orderId }, 'GET')
        .then((res) => {
          if (res.code === 0) {
            this.orderDetail = res.data;
            this.loadTracks();
          }
        })
        .catch(() => {
          uni.showToast({
            title: '加载订单信息失败',
            icon: 'none'
          });
        });
    },
    
    // 加载物流轨迹
    loadTracks() {
      if (!this.orderId) return;
      
      this.loading = true;
      this.$api
        .getExpressTrackList(this.orderId)
        .then((res) => {
          if (res.code === 0) {
            this.trackList = res.data || [];
          } else {
            uni.showToast({
              title: res.msg || '查询物流失败',
              icon: 'none'
            });
          }
        })
        .catch(() => {
          uni.showToast({
            title: '查询物流失败',
            icon: 'none'
          });
        })
        .finally(() => {
          this.loading = false;
        });
    },
    
    // 刷新物流轨迹
    refreshTracks() {
      this.loadTracks();
    },
    
    // 复制快递单号
    copyTrackingNumber() {
      if (!this.orderDetail.logisticsNo) {
        uni.showToast({
          title: '暂无快递单号',
          icon: 'none'
        });
        return;
      }
      
      uni.setClipboardData({
        data: this.orderDetail.logisticsNo,
        success: () => {
          uni.showToast({
            title: '快递单号已复制',
            icon: 'success'
          });
        },
        fail: () => {
          uni.showToast({
            title: '复制失败',
            icon: 'none'
          });
        }
      });
    },
    
    // 格式化物流时间
    formatTrackTime(timeStr) {
      if (!timeStr) return '';
      
      try {
        const date = new Date(timeStr);
        const now = new Date();
        const diff = now.getTime() - date.getTime();
        
        // 如果是今天
        if (diff < 24 * 60 * 60 * 1000 && date.getDate() === now.getDate()) {
          return date.toLocaleTimeString('zh-CN', { 
            hour: '2-digit', 
            minute: '2-digit' 
          });
        }
        
        // 如果是昨天
        const yesterday = new Date(now);
        yesterday.setDate(yesterday.getDate() - 1);
        if (date.getDate() === yesterday.getDate()) {
          return '昨天 ' + date.toLocaleTimeString('zh-CN', { 
            hour: '2-digit', 
            minute: '2-digit' 
          });
        }
        
        // 其他日期
        return date.toLocaleString('zh-CN', { 
          month: '2-digit', 
          day: '2-digit',
          hour: '2-digit', 
          minute: '2-digit' 
        });
      } catch (error) {
        return timeStr;
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.logistics-container {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 120rpx;
}

.logistics-header {
  background: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.logistics-info {
  .logistics-company {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20rpx;
    
    .company-name {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }
    
    .tracking-number {
      font-size: 28rpx;
      color: #007AFF;
      text-decoration: underline;
    }
  }
  
  .order-info {
    .order-number {
      font-size: 24rpx;
      color: #666;
    }
  }
}

.logistics-tracks {
  background: #fff;
  margin-bottom: 20rpx;
}

.tracks-title {
  padding: 30rpx 30rpx 20rpx;
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  border-bottom: 1rpx solid #f0f0f0;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60rpx 30rpx;
  
  .loading-text {
    margin-top: 20rpx;
    font-size: 28rpx;
    color: #999;
  }
}

.tracks-list {
  padding: 30rpx;
}

.track-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 40rpx;
  position: relative;
  
  &:last-child {
    margin-bottom: 0;
  }
  
  &.first {
    .track-dot {
      background: #007AFF;
      
      .dot-inner {
        background: #fff;
        width: 16rpx;
        height: 16rpx;
      }
    }
  }
  
  &.last {
    .track-dot {
      background: #e0e0e0;
      
      .dot-inner {
        display: none;
      }
    }
  }
}

.track-dot {
  width: 24rpx;
  height: 24rpx;
  border-radius: 50%;
  background: #007AFF;
  margin-right: 30rpx;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  
  .dot-inner {
    width: 8rpx;
    height: 8rpx;
    border-radius: 50%;
    background: #007AFF;
  }
}

.track-content {
  flex: 1;
  
  .track-desc {
    font-size: 28rpx;
    color: #333;
    line-height: 1.4;
    margin-bottom: 10rpx;
  }
  
  .track-time {
    font-size: 24rpx;
    color: #999;
  }
}

.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80rpx 30rpx;
  
  .empty-icon {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 30rpx;
    opacity: 0.5;
  }
  
  .empty-text {
    font-size: 32rpx;
    color: #999;
    margin-bottom: 10rpx;
  }
  
  .empty-desc {
    font-size: 24rpx;
    color: #ccc;
    text-align: center;
    line-height: 1.4;
  }
}

.logistics-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 20rpx 30rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30rpx;
}
</style>






